<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator=">" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">设备管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home" @click="back">摄像头管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">摄像头历史记录管理</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="nx-content">

      <NxTable :table-cols="tableCols" :table-data="tableData" :pag-ination="pagination" class="table-wrap" @refresh="refresh">
        <template slot="updateDate" slot-scope="scope">
          <span> {{ scope.row.updateDate | dateTimeFormat }}</span>
        </template>

        <template slot="status" slot-scope="scope">
          <span v-if="scope.row.status == 0">离线</span>
          <span v-if="scope.row.status == 1">在线</span>
        </template>

      </NxTable>
    </div>

  </div>
</template>
<script>
import { Page } from '@/utils/pagination'
import NxTable from '@/components/NxTable.vue'
import moment from 'moment'

import { getDataHisVideoStatusList } from '@/api/home'

export default {
  components: {
    NxTable
  },
  props: {},
  // 表格数据
  data() {
    return {
      activeName: 'first',
      // 查询字段
      searchForm: {
        id: ''
        // timeType: '0',
        // mode: 0,
      },
      startAndEndTime: '',
      tableData: [],
      typeDialog: false,
      addEditIsDialog: false, // 添加编辑页面状态
      date: [], // 日期范围

      tableCols: [
        {
          label: '摄像头名称',
          prop: 'videoName',
          align: 'center'
          // width: 250,
        },

        {
          label: '状态',
          slot: 'status',
          align: 'center'
          // width: 200,
        },
        {
          label: '修改时间',
          slot: 'updateDate',
          align: 'center'
          // width: 200,
        }
      ],
      tableData: [],
      pagination: new Page()
    }
  },
  filters: {
    dateTimeFormat(dateTime) {
      if (!dateTime) {
        return dateTime
      }
      return moment(dateTime).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  // 初始化加载
  mounted() {
    this.searchForm.id = this.$route.query.id
    this.seeType = false
    this.getLists()
  },
  // 自定义方法
  methods: {
    getChart(val) {
      this.searchForm.startDate = val[0]
      this.searchForm.endDate = val[1]
      this.getLists()
    },
    // 返回
    back() {
      this.$router.push({
        path: `/device/camera`
      })
    },
    // 查询
    onSubmit() {
      this.pagination.pageNum = 1
      this.getList()
      this.getLists()
    },
    // 分页查询
    refresh(val) {
      this.searchForm.pageNum = val.pageNum
      this.searchForm.pageSize = val.pageSize
    },

    // 获取列表列表
    getLists() {
      getDataHisVideoStatusList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.pagination.count = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-tabs__item {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;

  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;

    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }

    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}

.length {
  position: absolute;
  top: 2rem;
  right: 3.74rem;
  display: flex;
  align-items: center;

  .litem {
    display: flex;
    align-items: center;
    color: black;
    font-size: 0.93rem;
    margin-left: 2.1vw;

    img {
      width: 0.94vw;
      height: 1.1vw;
      margin-right: 0.5vw;
    }

    .line {
      width: 0.94vw;
      margin-right: 0.47vw;
      border-top: 1px dashed #00fcf9;
    }
  }
}

.flexc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.echartline {
  width: 100%;
  height: 22vw;
  margin-top: 10.4vw;
}
</style>
  